<template>
      <div id="dialog-box">
            <el-dialog
            title="修改会员信息"
            :visible.sync="DialogData.show"
            width="60%"
            >
            <!-- form -->
            <div class="form">
                  <el-form :model="FormData" status-icon  ref="ruleForm2" label-width="100px" class="demo-ruleForm">
                  <el-form-item label="用户姓名" prop="pass">
                  <el-input type="text" v-model="FormData.username" :disabled="disabled.username"></el-input>
                  <el-button type="danger" v-if="disabled.username" @click="disabled.username = false">修改</el-button>
                  <el-button v-if="!disabled.username" @click="cancel('username')">取消</el-button>
                  <el-button v-if="!disabled.username" type="success" @click="savename">保存</el-button>
                  </el-form-item>
                
                  <el-form-item label="手机号码" prop="age">
                  <el-input v-model="FormData.phone" :disabled="disabled.phone"></el-input>
                  <el-button type="danger" v-if="disabled.phone" @click="disabled.phone = false">修改</el-button>
                  <el-button v-if="!disabled.phone" @click="cancel('phone')">取消</el-button>
                  <el-button v-if="!disabled.phone" type="success" @click="savephone">保存</el-button>
                  </el-form-item>
                  
                 
                  </el-form>
            </div>
            <!-- formend -->
            <span slot="footer" class="dialog-footer">
            <el-button @click="DialogData.show = false">取 消</el-button>
            <el-button type="primary" @click="subForm">确 定</el-button>
            </span>
            </el-dialog>
      </div>
</template>

<script>
      export default {
            props: {
                  DialogData: Object,
                  FormData: Object,
                  disabled: Object
            },
            data() {
                  return {
                        checkPass: "",
                        // disabled: {
                        //       username: true,
                        //       phone: true,
                        //       password: true,
                        //       shopname: true,
                        //       shopsite: true,
                        //       shoptime: true,
                        // },
                        editInfo: {},
                  }
            },
            methods: {
                  async subForm() {
                        let token = localStorage.miniToken
                        this.editInfo.userid = this.FormData.userid
                        this.editInfo.token = token 
                        let { username, password, phone, shopname, shopsite, shoptime } = this.editInfo
                        if (username || password || phone || shopname || shopsite ||shoptime) {
                              let res = await this.$axios.post("/admin/user/amend", this.editInfo)
                              //console.log(res);
                              let code = res.data.code
                              if (code == 204) {
                                    this.$message.success("更新成功!")
                                    this.$emit("update")
                                    this.DialogData.show  = false
                              } else {
                                    this.$message.success("更新失败!")
                                    this.$emit("update")
                                    this.DialogData.show  = false
                              }
                        } else {
                              this.$message.error("您未做任何修改")
                              this.DialogData.show = false
                              return false;
                        }
                        
                        
                        
                  },
                  // 点击取消操作
                  cancel( res ) {
                        this.$message.error("您所更改的数据不会被保存!")
                        for (const key in this.disabled) {
                              if (key == res) {
                                    //console.log(1);
                                    this.disabled[key] = true
                              }
                        }
                        
                  },
                  savename() {
                        this.editInfo.username = this.FormData.username
                        this.disabled.username = true
                  },
                  savepass() {
                        if (!this.checkPass) {
                             this.$message.error("请确认密码") 
                             return false
                        } else if (this.checkPass != this.FormData.password) {
                              this.$message.error("两次输入的密码不一致,请重新输入!") 
                             return false
                        } else {
                              this.editInfo.password = this.FormData.password
                              this.disabled.password = true
                        }
                        
                  },
                  savephone() {
                        this.editInfo.phone = this.FormData.phone
                        this.disabled.phone = true
                  },
                  saveshop() {
                        this.editInfo.shopname = this.FormData.shopname
                        this.disabled.shopname = true
                  },
                  savesite() {
                        this.editInfo.shopsite = this.FormData.shopsite
                        this.disabled.shopsite = true
                  },
                  savetime() {
                        this.editInfo.shoptime = this.FormData.shoptime
                        this.disabled.shoptime = true
                  },
            },
      }
</script>

<style lang="scss" scoped>
.el-input {
      width: 70%;
      text-align: left;
}
.el-form {
      text-align: left;
}
</style>